<template>
  <div class="detail">
    <header class="header">
      <van-icon class="icon" name="arrow-left" @click.stop="$router.go(-1)"/>
      <div class="title">{{ title }}</div>
    </header>
    <van-tabs v-model="active" animated sticky :offset-top="'0.5rem'">
      <van-tab :title="'综合'">
        <div class="list" v-if="allList">
          <ClassItem
            v-for="classItem in allList"
            :key="classItem.c.id"
            :classItem="classItem.c"
          />
        </div>
      </van-tab>
      <van-tab :title="'新上线'">
        <div class="list" v-if="newList">
          <ClassItem
            v-for="classItem in newList"
            :key="classItem.c.id"
            :classItem="classItem.c"
          />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import qs from "qs";
import ClassItem from "@/components/ClassItem.vue";
export default {
  components: {
    ClassItem,
  },
  data: () => {
    return {
      title: "",
      allList: null,
      newList: null,
      active: 0,
    };
  },
  methods: {
    getAllList(or) {
      this.axios({
        method: "post",
        url: `${this.api.baseUrlV2}/course/getcourses/0/20`,
        data: qs.stringify({
          or,
          tag_categories: `[{"id":"1","tags":["${this.$route.params.tagid}"]}]`,
        }),
        headers: {
          version: this.api.version,
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        },
      }).then((res) => {
        if (or == 1) {
          this.allList = res.data.result.list;
        } else {
          this.newList = res.data.result.list;
        }
      });
    },
  },
  activated(){
    this.title = localStorage.getItem("tag");
    this.getAllList(1);
    this.getAllList(0);
  }
};
</script>

<style lang="scss" scoped>
.detail {
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  background-color: var(--bgc-white);
  z-index: 100;
  &::-webkit-scrollbar {
    display: none;
  }
  .header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: var(--bgc-white);
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.1rem;
    display: flex;
    align-items: center;
    height: 0.5rem;
    .icon {
      font-size: 0.2rem;
    }
    .title {
      font-size: 0.2rem;
      margin-left: 0.2rem;
    }
  }
  .list {
    width: 100%;
    box-sizing: border-box;
    padding: 0.1rem 0.15rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
</style>